<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            display: flex;
        }

        .left,
        .right {
            flex: 1;
        }

        table {
            border-collapse: collapse;
        }

        table th,
        table td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <div id="app">

        <div class="left">
            <h1>商品列表</h1>
            <button @click="isAddMode = !isAddMode">添加商品</button>

            <template v-if="isAddMode">
                <div>
                    <label>
                        商品名称：<input type="text" placeholder="商品名称" v-model.trim="goodName" />
                    </label>
                </div>

                <div>
                    <label>
                        商品价格：<input type="text" placeholder="商品价格" v-model.trim.number="goodPrice" />
                    </label>
                </div>

                <div>
                    <button @click="onAdd">确定添加</button>
                </div>
            </template>

            <table>
                <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品库存</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="good in goodList" :key="good.id">
                        <td>{{ good.id }}</td>
                        <td v-text="good.name"></td>
                        <td>{{ good.price }}</td>
                        <td>{{ good.num }}</td>
                        <td>
                            <button @click="onAddCart(good.id)">添加到购物车</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>


        <div class="right">
            <h1>购物车列表</h1>
            <table>
                <thead>
                    <tr>
                        <th>勾选</th>
                        <th>商品ID</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 
                        [ {goodId: 1, goodName: '', goodPrice: '', goodNum: ''} ]
                     -->
                    <tr v-for="good in cartList" :key="good.goodId">
                        <td>
                            <input type="checkbox" v-model="checkedGoodIds" :value="good.goodId" />
                        </td>
                        <td>{{ good.goodId }}</td>
                        <td>{{ good.goodName }}</td>
                        <td>{{ good.goodPrice }}</td>
                        <td>{{ good.goodNum }}</td>
                        <td>{{ good.goodPrice * good.goodNum }}</td>
                        <td>
                            <button>-</button>
                            <button>+</button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 1. 放一个函数，加括号执行它，函数里面返回我们需要的总计 -->
            <p>勾选的总计：{{ calcTotal() }} 元</p>
        </div>

    </div>


    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',

            data: {
                isAddMode: true, // 当前是否是添加商品模式

                goodName: '', // 关联商品名称输入框
                goodPrice: '', // 关联商品价格输入框

                goodList: [
                    // 商品列表
                    { id: 1, name: '小米', price: 100, num: 10 },
                    { id: 2, name: '华为', price: 200, num: 20 }
                ],

                cartList: [
                    // 购物车列表
                ],

                checkedGoodIds: [], // 购物车列表中，勾选的商品Id的集合
            },

            methods: {
                // 添加商品
                onAdd() {
                    // 简单的校验，商品名称与商品价格都不能为空

                    // 1. 原生js该如何获取就如何获取
                    // 2. vue中，使用 v-model 将数据进行双向绑定。
                    // if (this.goodName && this.goodPrice) {
                    //     // 两个都有
                    //     // 这里的代码量会更多
                    // } else {
                    //     // 存在没有填写的话，提示一下
                    //     alert('请完整填写信息')
                    // }
                    if (!this.goodName || !this.goodPrice) {
                        // 存在没有填写的话，提示一下
                        alert('请完整填写信息')
                        return
                    }

                    // 添加一个商品 组织一个对象往 goodList 中添加
                    this.goodList.push({
                        id: this.goodList.length + 1,
                        name: this.goodName,
                        price: this.goodPrice,
                        num: 10
                    })
                },

                // 添加到购物车
                onAddCart(goodId) {
                    // 1. 根据传递过来的 goodId 找到 goodList 中对应的那个商品    find
                    const curHandleGood = this.goodList.find((item) => item.id === goodId)
                    
                    console.log(curHandleGood, '-----')

                    // 判断当前这个商品，还有没有库存，
                    //      有： 往下走
                    //      没有：阻止往下执行，且 alert 请补货
                    if (curHandleGood.num < 1) {
                        alert('请补货')
                        return
                    }

                    // 2. 将他往购物车数据中添加
                    //      2.1 如果当前商品已经存在与购物车中，则直接将购物车数量+1
                    //      2.2 如果当前商品，没有添加过购物车，那么添加。购物车当前商品数量 为 1

                    // 根据传递过来的 goodId 去找到 cartList 中对应的下标
                    const index = this.cartList.findIndex((item) => item.goodId === goodId)

                    if (index > -1) {
                        // 存在，则+1
                        this.cartList[index].goodNum++
                    } else {
                        // 不存在，则整个添加
                        this.cartList.push({
                            goodId: curHandleGood.id,
                            goodName: curHandleGood.name,
                            goodPrice: curHandleGood.price,
                            goodNum: 1
                        })
                    }


                    // 处理 goodList 中 库存的数量问题 ，对应的商品 - 1
                    curHandleGood.num--

                },

                // 动态计算总计
                calcTotal() {
                    console.log('1111');
                    // this.cartList goodNum goodPrice

                    // reduce
                    // [{num: 1}, {num: 2}]  => 3
                    // [{num: 1}, {num: 2}, {num: 3}]  => 6
                    //

                    const price = this.cartList
                    .filter((item) => {
                        return this.checkedGoodIds.includes(item.goodId)
                    }).reduce((total, item) => {
                        // 计算小计
                        const a = item.goodNum * item.goodPrice
                        return total += a
                    }, 0)

                    return price
                }
            }
        })


        // 1. 缓存起来
        // 2. 全选与反选
    </script>
</body>

</html>